<script setup lang="ts">
import useStore from '@/store';
import { storeToRefs } from 'pinia';
const { user } = useStore();
const { mail, password, name, phone } = storeToRefs(user);
const { doRegister } = user;
</script>

<template>
	<div class="LorR-model register-model">
		<input class="LorR-txt" v-model="mail" type="text" placeholder="请输入您的邮箱" />
		<input class="LorR-txt" v-model="name" type="text" placeholder="请输入您的名字" />
		<input class="LorR-txt" v-model="phone" type="text" placeholder="请输入您的手机号码" />
		<input class="LorR-txt" v-model="password" type="password" placeholder="请输入您的密码" />
		<input class="LorR-btn" @click="doRegister()" type="submit" value="注册" />
	</div>
</template>

<style lang="scss" scoped>
@import "@/assets/global";

input::-webkit-input-placeholder {
	color: #949494;
}

input {
	border: none,
}

.LorR-model {
	float: left;
	width: 100%;
	margin-top: 15px;

	.LorR-txt {
		display: block;
		width: 95%;
		height: 42px;
		font-size: larger;
		background-color: #f7f8fa;
		color: #666;
		border-radius: 12px;
		padding-left: 18px;
		margin-bottom: 15px;
	}

	.LorR-btn {
		display: block;
		width: 100%;
		height: 42px;
		background-color: $theme;
		color: #fff;
		border-radius: 15px;
		cursor: pointer;
		font-size: medium;
		outline: none;
	}
}
</style>
